import { FC, useEffect } from 'react'
import { Form, Input, Checkbox, Select, Space, Button } from 'antd'
import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons'
import { propsType } from './index'
import { useDispatch } from 'react-redux'
import { editComponent } from '@/store/componentsReducer'
import { nanoid } from 'nanoid'
const PropComponent: FC<propsType> = props => {
  const { title, isVertical, options, value, disabled } = props
  const [form] = Form.useForm()
  const dispatch = useDispatch()
  useEffect(() => {
    form.setFieldsValue({ title, isVertical, options, value })
  }, [title, isVertical, options, value, form])
  const handelValueChange = () => {
    const { options } = form.getFieldsValue() as propsType
    options?.forEach(item => {
      if (!item.value) {
        item.value = nanoid()
      }
    })
    dispatch(editComponent(form.getFieldsValue()))
  }
  return (
    <Form
      onValuesChange={handelValueChange}
      disabled={disabled}
      layout="vertical"
      initialValues={{ title, isVertical, options, value }}
      form={form}>
      <Form.Item label="标题" name="title" rules={[{ required: true, message: '请输入标题' }]}>
        <Input />
      </Form.Item>
      <Form.Item label="选项">
        <Form.List name="options">
          {(fields, { add, remove }) => (
            <>
              {fields.map(({ key, name }, index) => {
                return (
                  <Space key={key} align="baseline">
                    <Form.Item
                      name={[name, 'text']}
                      rules={[
                        { required: true, message: '请输入选项文字' },
                        {
                          validator: (_, value) => {
                            const { options = [] } = form.getFieldsValue()
                            let num = 0
                            options.forEach((item: { value: string; text: string }) => {
                              if (item.text === value) {
                                num++
                              }
                            })
                            if (num === 1) return Promise.resolve()
                            return Promise.reject(new Error('和其他选项重复了！'))
                          },
                        },
                      ]}>
                      <Input placeholder="输入选项文字..." />
                    </Form.Item>
                    {index > 1 && <MinusCircleOutlined onClick={() => remove(name)} />}
                  </Space>
                )
              })}
              <Form.Item>
                <Button block type="link" icon={<PlusOutlined />} onClick={() => add({ text: '', value: '' })}>
                  添加选项
                </Button>
              </Form.Item>
            </>
          )}
        </Form.List>
      </Form.Item>
      <Form.Item label="默认选中" name="value">
        <Select options={options?.map(({ text, value }) => ({ value, label: text }))} />
      </Form.Item>
      <Form.Item name="isVertical" valuePropName="checked">
        <Checkbox>竖向排列</Checkbox>
      </Form.Item>
    </Form>
  )
}

export default PropComponent
